<template>
<div class="grid-container">
  <div class="item1">表格设置</div>
  <div class="item2"><tablelist></tablelist></div>
  <div class="item3"><tablesetting></tablesetting></div>  
</div>
</template>
<script>
import tablelist from './tablelist.vue'
import tablesetting from './tablesetting.vue'
export default {
  components:{
      tablelist,
      tablesetting
  }
}
</script>
<style  scoped>
.item1 { 
  grid-area: header; 
  
}
.item2 { 
  grid-area: menu; 
}

.grid-container {
  display: grid;
  grid:
  'menu header '
  'menu main ';
  grid-template-columns:13% 87%;
  border: 1px solid #EBEEF5;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  /* padding: 20px 0; */
  /* border: 1px solid #000; */
  font-size: 30px;
}
</style>